<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
		<title>登录页面</title>
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0">
		<!-- 网站作者 -->
		<meta name="author" content="作者名、昵称、代号等">
		<!-- 网站描述 -->
		<meta name="description" content="本网站为...类型网站，主要服务对象为...">
		<!-- 网站关键词 -->
		<meta name="keywords" content="关键词1，关键词2，...">
		<!-- 禁止链接高亮 -->
		<meta name="msapplication-tap-highlight" content="no">
		<!-- format-detection为格式检测 -->
		<!-- 禁止手机自动将网页中的电话号码显示为拨号的超链接 -->
		<meta name="format-detection" content="telephone=no">
		<!-- 告诉设备不识别邮箱，点击之后不自动发送 -->
		<meta name="format-detection" content="email=no">
		<!-- 禁止跳转至地图功能页面 -->
		<meta name="format-detection" content="adress=no">
		<!-- UC强制竖屏 -->
		<meta name="screen-orientation" content="portrait"> 
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360-优先使用 IE 最新版本和 Chrome进行渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<!-- 网页标题 -->
		<title>网页标题</title>
		<!-- 移动端初始化样式表 -->
		<link rel="stylesheet" type="text/css" href="./reset.css">
		<!-- 自定义样式表 -->
		<link rel="stylesheet" type="text/css" href="">
		<!-- 引入flexible.js或者flexible_simplify.js精简版，解决rem适配与机型计算问题 -->
		<script type="text/javascript" src="./flexible.js"></script>
		<!-- 引入fastClick插件解决移动端点击300ms延迟问题 -->
		<script type="text/javascript" src="./fastclick.js"></script>
		<!-- 实例化fastclick -->
		<script type="text/javascript">
		    if ('addEventListener' in document) {
		        document.addEventListener('DOMContentLoaded', function() {
		            FastClick.attach(document.body);
		        }, false);
		    }
		</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.box{
				max-width: 640px;
				min-width: 320px;
				height: auto;
				margin: 0 auto;
			}
			.nav{
				height: 1.2rem;
				width: 100%;
				background: url(img/nav.png);
				background-size: 100% 100%;
				display: flex;
				align-items: center;
			}
			.nav img{
				height: 0.5rem;
				margin-left: 0.5rem;
			}
			.nav p{
				width: 80%;
				text-align: center;
				font-size: 0.5rem;
				color: white;
			}
			.box_box{
				width: 100%;
				height: 5.7rem;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.logo{
				width: 1.8rem;
				height: 2.8rem;
				background: url(img/logo@2x.png);
				background-size:100% 100%;
			}
		    .inp_box{
				width: 100%;
				height: 1rem;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 0.33rem;
			}
			.inp_box input{
				height: 1rem;
				width: 8rem;
				box-shadow: 0px 3px 6px rgba(0,0,0,.3);
				box-sizing: border-box;
				padding-left: 0.3rem;
				border-radius: 0.2rem;
			}
			.btn_box{
				height: 1rem;
				width: 8rem;
				display: flex;
				justify-content: space-between;
			}
			.btn_box button{
				font-size:0.24rem ;
				width: 1.8rem;
				height:0.8rem ;
				border: none;
				border: 1px solid darkgray;
				background: transparent;
				outline: none;
				border-radius: 0.1rem;
			}
			button[name="dl"]{
				width: 4.2rem;
				height: 1rem;
				border-radius: 0.2rem;
				border: none;
				background: #ff3333;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="nav">
				<img src="img/fanhui@2x.png" >
				<p>登录</p>
			</div>
			<div class="box_box">
				<div class="logo"></div>
			</div>
			<div class="inp_box">
				<input type="text" name="zh" placeholder="输入账号"/>
			</div>
			<div class="inp_box">
				<input type="password" name="mima" placeholder="输入密码"/>
			</div>
			<div class="inp_box">
				<div class="btn_box">
					<button name="wj">忘记密码</button><button name="zc">立即注册</button>
				</div>
			</div>
			<div class="inp_box">
				<button type="button" name="dl">登录</button>
			</div>
		</div>
		<script type="text/javascript">
			var in1=document.getElementsByTagName("input")[0]
			var in2=document.getElementsByTagName("input")[1]
			var btn2=document.getElementsByTagName("button")[1]
			var btn1=document.getElementsByTagName("button")[0]
			var btn3=document.getElementsByTagName("button")[2]
			btn1.onclick=function(){
				location.href="rem_wj.html"
			}
			btn2.onclick=function(){
				location.href="rem_zhuce.html"
			}
			
			btn3.onclick=function(){
				if(in1.value==""){
					in1.value="请输入账号"
					in1.style.color="red"
				}
				else{
					in1.style.color="gray"
				}
				
			}
			btn3.onclick=function(){
				if(in2.value==""){
					in2.value="请输入账号"
					in2.style.color="red"
				}
				else{
					in2.style.color="gray"
				}
				
			}
			
		</script>
	</body>
	
</html>
